<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <view class="content" :style="{'min-height': `${noBarHeight - 60 - (footerRail ? 20: 0)}px`}">
            <view :class="item.state == 0 ? 'message_block' : 'message_blockToo'" v-for="(item, index) in msgHistory" :key="index">
                <img class="user_image" :src="item.image" alt="头像" />
                <view class="meg_content">
                    {{ item.text }}
                </view>
            </view>
        </view>
        <view class="keyboard" :style="{'padding-bottom': `${footerRail ? 40 : 0}rpx`}">
            <input class="input_block" v-model="keywordValue" />
            <view class="send_btn" @click="sendMsg">
                发送
            </view>
        </view>
    </view>
</template>
<script>
import Header from "@/components/Header.vue";
import {imLogin} from "../../../utils/utils";
var app = getApp()
export default ({
    name: "imInfo",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '对接详情',
            noBarHeight: app.globalData.noBarHeight,
            footerRail: app.globalData.footerRail,
            keywordValue: '',
            msgHistory: [
                {
                    id: 1,
                    time: '2013-10-16',
                    image: '',
                    name: '甲',
                    state: 1, // 0自己 1对方
                    text: '你好呀'
                },
                {
                    id: 2,
                    time: '2013-10-16',
                    image: '',
                    name: '甲',
                    state: 1, // 0自己 1对方
                    text: '你好呀'
                },
                {
                    id: 3,
                    time: '2013-10-16',
                    image: '',
                    name: '甲',
                    state: 0, // 0自己 1对方
                    text: '你好呀'
                },
                {
                    id: 4,
                    time: '2013-10-16',
                    image: '',
                    name: '甲',
                    state: 1, // 0自己 1对方
                    text: '你好呀'
                }
            ]
        }
    },
    components: {
        Header
    },
    methods: {
        sendMsg() {
            console.log('发送')
            const messgae = {
                id: this.msgHistory.length + 2,
                time: new Date(),
                image: '',
                name: '甲',
                state: 0, // 0自己 1对方
                text: this.keywordValue
            }

            this.msgHistory.push(messgae)


            let msg = uni.WebIM.message.create({
                type: "txt",
                // 消息内容。
                // msg: this.chatContent,
                msg: "11111",
                // 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
                to: '123', //测试时可以写死
                // 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
                chatType: "singleChat",
            });
            // 发送消息
            uni.WebIM.conn.send(msg).then((e) => {
                console.log("Send message success", e);
            })
            .catch((e) => {
                console.log(e, "send error")
            }).catch((e) => {
                // 重新登录
                if (e.type == 39) {
                    imLogin()
                    let timer33 = setTimeout(()=>{
                        clearTimeout(timer33)
                        this.imSend(msg,messageList)
                    },3000)
                    return
                }
                // 重新登录  510断开连接
                if (e.type == 510) {
                    console.log(510)
                    imLogin()
                    let timer33 = setTimeout(()=>{
                        clearTimeout(timer33)
                        this.imSend(msg,messageList)
                    },3000)
                    return
                }

            })
        }
    },
    onLoad(options) {
        console.log(options, 'options')
        this.title = 'ceshi'
    }
})
</script>

<style scoped lang="scss">
.content {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    box-sizing: border-box;
    padding: 20rpx;
    .message_block {
        display: flex;
        align-items: start;
        justify-content: flex-start;
        flex-direction: row-reverse;
        margin-top: 20rpx;
        position: relative;
        .user_image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            border: 1rpx solid pink;
            margin-left: 30rpx;
        }
        .meg_content {
            margin-top: 10rpx;
            width: auto;
            min-height: 76rpx;
            background: #e3e6ff;
            padding: 18rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            line-height: 40rpx;
            border-radius: 20rpx;
        }
        .meg_content::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 40rpx;
            right: 100rpx;
            border-top: 12rpx solid transparent;
            border-right: 12rpx solid transparent;
            border-bottom: 12rpx solid transparent;
            border-left: 12rpx solid #e3e6ff;
        }
    }
    .message_blockToo {
        display: flex;
        align-items: start;
        justify-content: flex-start;
        margin-top: 20rpx;
        position: relative;
        .user_image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            border: 1rpx solid pink;
            margin-right: 30rpx;
        }
        .meg_content {
            margin-top: 10rpx;
            width: auto;
            min-height: 76rpx;
            background: #ffffff;
            padding: 18rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            line-height: 40rpx;
            border-radius: 20rpx;
        }
        .meg_content::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 40rpx;
            left: 100rpx;
            border-top: 12rpx solid transparent;
            border-left: 12rpx solid transparent;
            border-bottom: 12rpx solid transparent;
            border-right: 12rpx solid white;
        }
    }
}
.keyboard {
    width: 100%;
    height: 100rpx;
    background: white;
    display: flex;
    align-items: center;
    position: relative;
    bottom: 0;
    left: 0;
    .input_block {
        width: 100%;
        flex: 1;
        height: 70rpx;
        border: 1px solid #E2E2E2;
        margin-left: 34rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    .send_btn {
        width: 180rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #494949;
    }
}
</style>
